<template>
  <div style="position:relative;padding-top:4px;">
    <span class="price">${{ scopeRow.order.totalPrice / 100 }}</span>
    <div
      v-for="(item, index) in scopeRow.orderDetails"
      :key="item.id"
      class="productItem"
    >
      <el-row type="flex">
        <el-col style="width:65px;margin-right:15px">
          <!-- 产品图 -->
          <el-image
            class="productImg"
            :src="
              item.thumbnailUri.indexOf('http') === 0
                ? item.thumbnailUri
                : imgPrefix + item.thumbnailUri + imgSuffix
            "
            lazy
            @click="
              toProview(
                item.thumbnailUri.indexOf('http') === 0
                  ? item.thumbnailUri
                  : imgPrefix + item.thumbnailUri
              )
            "
          >
            <div slot="placeholder" class="image-slot">
              <i class="el-icon-loading" />
            </div>
          </el-image>
          <!-- 设计图 -->
          <span style="display:none;">{{
            item.materialUri.indexOf('http') === 0
              ? item.materialUri
              : imgPrefix + item.materialUri + imgSuffix
          }}</span>
        </el-col>
        <el-col>
          <p class="infoItem">
            <span class="proDescription">Title:</span>
            <span>{{ item.name }}</span>
          </p>
          <p class="infoItem">
            <span class="proDescription">SKU:</span>
            <span
              class="searchClickArea"
              @click="inlineSearch('sku', item.sku)"
            >{{ item.sku }}</span>
          </p>
          <p class="infoItem">
            <span class="proDescription">Variant:</span>
            <span>{{ item.variantTitle }}</span>
          </p>
          <p v-if="item.materialId" class="infoItem">
            <span class="proDescription">Design Name:</span>
            <span>{{ item.materialName }}</span>
          </p>
          <div style="margin-top: 6px;">
            <span class="itemPrice">
              ${{ Number(item.price).toFixed(2) }} *
              <span>{{ item.quantity }}</span>
            </span>
            <template v-if="pageName === 'PENDING'" class="matchBtns">
              <el-button
                v-if="item.materialId === 0"
                size="mini"
                @click.stop="
                  showDesignDialog(
                    scopeRow.order.id,
                    scopeRow.orderDetails[index].id
                  )
                "
              >
                Bind design
              </el-button>
              <el-button
                v-else
                type="primary"
                size="mini"
                @click.stop="
                  showDesignDialog(
                    scopeRow.order.id,
                    scopeRow.orderDetails[index].id,
                    true
                  )
                "
              >Reset design</el-button>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    scopeRow: {
      type: Object,
      required: true
    },
    pageName: {
      type: String,
      required: true
    },
    toProview: {
      type: Function,
      required: true
    },
    showDesignDialog: {
      type: Function,
      required: true
    },
    inlineSearch: {
      type: Function,
      required: true
    }
  }
};
</script>

<style scoped lang="scss">
.price {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  left: 0;
  top: 0px;
  padding-right: 6px;
  padding-left: 4px;
  height: 20px;
  line-height: 20px;
  z-index: 2;
  font-size: 12px;
  &:after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0.4);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
}
.productItem {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px dashed #ddd;
  &:last-child {
    margin-bottom: 0;
    border: none;
  }
  .infoItem {
    line-height: 18px;
    padding: 1px 0;
    .proDescription {
      color: #000000;
      font-weight: bold;
      padding-right: 5px;
    }
    .searchClickArea {
      cursor: pointer;
      &:hover {
        color: #16ad61;
      }
    }
  }
  .matchBtns {
    .el-button {
      padding: 5px 8px;
    }
  }
  .itemPrice {
    font-size: 16px;
    margin-right: 10px;
    span {
      color:red;
    }
  }
}
</style>
